<template>
	<view class="container">
		<!-- 顶部 -->
		<view style="width: 100%;height: 10%;margin-bottom: 32px;" >
			<view>
				<image style="width: 80rpx;height:80rpx;margin-left: 50rpx;position: relative;top:95rpx;"
					class="shrink-0 image_3"
					src="http://101.43.223.224:8765/image/getImageById?id=6756" />
			</view>
			<view class="div2">
				<view class="div2-2"
					style="display: flex; align-items: center; justify-content: center;color: #636363;margin-top: 15rpx;">
					<view style="float: left;">
						<image style="width: 40rpx;height: 40rpx;margin-left: -90rpx;" src="../../../static/哑铃.png" alt="">
						</image>
					</view>
					<view style="float: left; margin-left: 10rpx;letter-spacing: 2px;font-size: 28rpx;">
						<text style="font-weight: bold;">追云健身俱乐部</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 返回 -->
		<view class="return1">
			<view class="return1-left">
				<u-icon name="arrow-left" size="35rpx" color="black" @click="fanhui()"></u-icon>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view style="width: 96%;height: 1%;"></view>
			<view class="content-top">
				<!-- <view class="content-top-img">
					<image style="width: 100rpx; height: 100rpx; border-radius: 50%;" 
					src="http://101.43.223.224:8765/image/getImageById?id=6755"></image>
				</view> -->
				<view class="content-top-text">
					<text style="font-size: 45rpx;"> {{articleform.articleTitle}} </text>
				</view>
			</view>
			<view style="width: 50%;height: 2%;margin-left: 6%;margin-top: 4%;font-size: 35rpx;color: #414141;" >
				{{articleform.content}}
			</view>
			<view class="content-center">
				<view style="width: 100%;height: 80%;">
					<image style="width: 720rpx; height:650rpx; border-radius: 20rpx;"
					:src="'http://101.43.223.224:8765/image/getImageById?id=' + articleform.filePath"></image>
				</view>
			</view>
		</view>
		<tabbar selected-index=0></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 文章表单
				articleform:{}
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.queryArticleById(this.id)
		},
		methods: {
			// 查询文章id单查
			queryArticleById(id){
				var ths=this
				uni.request({
					url: this.URL+'Article/selectArticleById',
					method: 'GET',
					data:{
						id:id,
					},
					success: function(res) {
						if(res.data.code===200){
							ths.articleform = res.data.data
							console.log(ths.articleList)
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('查询失败,请检查网络');
					}
				})
			},
			fanhui(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style>
	/* 设置背景图片 */
	.container {
		width: 100%;
		height: 100vh;
		/* display: flex; */
		justify-content: center;
		align-items: center;
		background-image: url('http://101.43.223.224:8765/image/getImageById?id=6755');
		background-size: cover;
	}
	/* 顶部样式 */
	.div2-2 {
		background-color: #F5F5F5;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
	/* 顶部样式 */
	.div2-2 {
		background-color: #F5F5F5;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
	.return1 {
		width: 96%;
		height: 5%;
		margin: 0 auto;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
	}
	.return1-left{
		width: 20%;
		height: 45%;
		margin-left: 3%;
	}
	.content{
		width: 96%;
		height: 73%;
		margin: 0 auto;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 25rpx;
		margin-top: 2%;
	}
	.content-top{
		width: 94%;
		height: 8%;
		margin-left: 3%;
		display: flex; 
		flex-direction: row; 
	}
	.content-top-img{
		width: 25%;
		height: 90%;
	}
	.content-top-text{
		width: 75%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.content-center{
		width: 100%;
		height: 95%;
		margin-top: 7%;
	}
</style>
